﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="注册向导，滚动，表单，jquery" />
    <meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" />
    <title>jQuery+CSS实现垂直滚动效果</title>
    <style type="text/css">
        .vertical
        {
            position: relative;
            width: 650px;
            height: 465px;
            margin: 10px auto;
            border-top: 1px solid #ddd;
            overflow: hidden;
        }
        .items
        {
            position: absolute;
            width: 650px;
            height: 20000em;
        }
        .item
        {
            height: 180px;
            margin: 10px 0px;
            padding: 15px;
            background: #f7f7f7;
            border-bottom: 1px solid #ddd;
        }
        #actions
        {
            width: 650px;
            margin: 30px auto 10px;
        }
        #actions a
        {
            display: block;
            width: 24px;
            height: 24px;
            background: url(images/arr.gif) no-repeat;
            cursor: pointer;
            text-indent: -9999px;
        }
        #actions a.next
        {
            float: right;
            background-position: -24px 0;
        }
        .disabled
        {
            visibility: hidden;
        }
        .item img
        {
            float: left;
            width: 240px;
            height: 160px;
            margin: 10px;
        }
        .item h3
        {
            line-height: 24px;
            margin: 10px 5px;
            font-size: 16px;
            color: #456;
        }
        .item p
        {
            line-height: 22px;
            margin: 6px 5px;
        }
    </style>
    <script type="text/javascript" src="/scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="/scripts/scrollable.js"></script>
</head>
<body>
    <div id="main">
        <h2 class="top_title">
            <a href="/index.html">jQuery+CSS实现垂直滚动效果</a></h2>
        <p style="height: 24px; line-height: 24px; padding-left: 80px">
            小提示：点击箭头或者使用鼠标滚轮可以滚动内容。</p>
        <div id="actions">
            <a class="next">&gt;</a><a class="prev">&lt;</a></div>
        <div class="scrollable vertical">
            <div class="items">
                <div>
                    <div class="item">
                        <img src="images/s1.jpg" alt="" />
                        <h3>
                            北京利比亚驻华大使馆升起反对派国旗</h3>
                        <p>
                            8月22日，北京利比亚驻华大使馆，门前的国旗已经更换成了反对派的国旗。22日上午11点左右，记者电话采访了利比亚驻华使馆，一位中方工作人员告诉记者，目前未接到闭馆和工作调整的通知，使馆人员应该会照常上班。</p>
                        <p>
                            <a href="#">查看详情</a></p>
                    </div>
                </div>
                <div>
                    <div class="item">
                        <img src="images/s2.jpg" alt="" />
                        <h3>
                            迷途火烈鸟与白天鹅和谐相处</h3>
                        <p>
                            像一团火焰般迷人的火烈鸟，你以前也许见过，不过，那一定是在动物园或遥远的异国他乡。而近日，一只火烈鸟落在西安浐灞生态区内，市民看到它欣喜若狂。
                        </p>
                        <p>
                            <a href="#">查看详情</a></p>
                    </div>
                </div>
                <div>
                    <div class="item">
                        <img src="images/s3.jpg" alt="" />
                        <h3>
                            居住者体验透明“泡泡屋”享受大自然</h3>
                        <p>
                            近日，在法国北部城市鲁贝出现了一种“泡泡屋”，这种“泡泡屋”由再生塑料制成，使用一架静音鼓风机保持气压。它可作为旅馆房间出租，并安置在户外，使居住者能够与大自然亲密接触。</p>
                        <p>
                            <a href="#">查看详情</a></p>
                    </div>
                </div>
                <div>
                    <div class="item">
                        <img src="images/s4.jpg" alt="" />
                        <h3>
                            太行深处的袖珍学校</h3>
                        <p>
                            在平顺县虹梯关乡西辿小学，唯一的老师原子朝在课间休息时给孩子们倒水喝。由于地处太行山巅，生活用水全靠收存雨水。在山西省平顺县的太行山深处，散落着几十所“袖珍学校”——每所学校的老师和学生加起来还不到10个人。</p>
                        <p>
                            <a href="#">查看详情</a></p>
                    </div>
                </div>
                <div>
                    <div class="item">
                        <img src="images/s5.jpg" alt="" />
                        <h3>
                            德国汉堡湖中现巨型美女洗浴雕像</h3>
                        <p>
                            8月3日，在德国汉堡阿尔斯特湖中放置着一座女子雕像。这座4米高的雕像被称作“巨大的美人鱼”或“洗浴的美女”，由艺术家奥利弗·福斯设计，将在阿尔斯特湖中展出至12日。</p>
                        <p>
                            <a href="#">查看详情</a></p>
                    </div>
                </div>
                <div>
                    <div class="item">
                        <img src="images/s6.jpg" alt="" />
                        <h3>
                            以色列青年集体搭帐篷抗议高房价</h3>
                        <p>
                            以色列几百名年轻人上周末在第二大城市特拉维夫建起一座由数十个帐篷组成的“帐篷城”，抗议以色列大城市令人乍舌的租房和买房成本。</p>
                        <p>
                            <a href="#">查看详情</a></p>
                    </div>
                </div>
                <div>
                    <div class="item">
                        <img src="images/s7.jpg" alt="" />
                        <h3>
                            浙江绍兴出现壮观“空中瀑布”景象</h3>
                        <p>
                            7月18日，绍兴市越城区皋埠镇出现了一道壮观的“空中瀑布”。当地老人称这种现象为“雨条”，实际上这是雷阵雨，也有人把它叫做“夏雨隔田埂”现象。</p>
                        <p>
                            <a href="#">查看详情</a></p>
                    </div>
                </div>
                <div>
                    <div class="item">
                        <img src="images/s8.jpg" alt="" />
                        <h3>
                            泰国大象治疗计划激发残疾儿童能力</h3>
                        <p>
                            8月16日，泰国呵叻省，大象计划治疗期，在白沙庄区的大象中心，失明的泰国儿童近距离接触大象。大象治疗计划是要帮助残疾儿童提高专项运动技能。</p>
                        <p>
                            <a href="#">查看详情</a></p>
                    </div>
                </div>
                <div>
                    <div class="item">
                        <img src="images/s9.jpg" alt="" />
                        <h3>
                            拉萨突降大雨 布达拉宫上空雷电交加</h3>
                        <p>
                            8月14日，一道闪电划过布达拉宫上空。当晚，一场雷雨突降拉萨，布达拉宫上空闪电交加，一场华丽的火光交响乐在夜空谱写。
                        </p>
                        <p>
                            <a href="#">查看详情</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $(".scrollable").scrollable({ vertical: true, mousewheel: true });
        });
    </script>
    <p id="stat">
        <script type="text/javascript" src="http://js.tongji.linezing.com/1870888/tongji.js"></script>
    </p>
</body>
</html>
